import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {View, Text, Button, Image} from '@tarojs/components'
import {http} from '../utils/http'
import {
  GET_IMG_BYWORD, RESOURCE_URL
} from '../constants/api'
import {getPoster} from "../utils/poster.service";
import {GetRequest, vcmonitor} from "../utils/tools";
import {h5Wx} from "../utils/h5.service";
import {platform} from "../utils/platform-settting.service";
import GzhAuth from "../components/gzh-auth/gzh-auth"
import './list.scss'

export default class CheckTicket extends Component {

  state: {
    wordImg: [] | false
    url: string
    name: string
    pid: number
    id: number
    type: string
    show: boolean
  } = {
    url: '',
    pid: 0,
    id: 0,
    name: '',
    wordImg: false,
    type: '',
    show: false
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      const {pid, id, name} = Taro.getCurrentInstance().router.params
      await h5Wx.getConfig()
      const shareData = {
        title: platform.info.platformName,
        desc: name,
        link: window.location.origin + '/words/preview?pid=' + pid + '&id=' + id + '&name=' + name,
        imgUrl: platform.info.platformLogo
      }
      h5Wx.share(shareData)
    }
    if (process.env.TARO_ENV === "weapp") {
      Taro.hideShareMenu()
    }
  }

  async componentDidShow() {
    vcmonitor(this)
    const {url, pid, id, name, type} = Taro.getCurrentInstance().router.params
    const wordImg = await http.get(GET_IMG_BYWORD, {id: pid, resourceId: id})
    this.setState({wordImg, id, pid, name, url, type})
  }

  onShareAppMessage() {
    return {
      title: this.state.name,
      path: '/words/preview?pid=' + this.state.pid + '&id=' + this.state.id + '&name=' + this.state.name + `&sKey=${Taro.getStorageSync('sKey' || '')}`
    }
  }

  onCopy(str) {
    try {
      Taro.setClipboardData({
        data: RESOURCE_URL + str
      })
      if (process.env.TARO_ENV === 'h5') {
        Taro.showToast({title: '复制成功'})
      }
    } catch (e) {
      Taro.showToast({title: '复制失败'})
    }
  }

  async onGetPoster(id) {
    Taro.showLoading({title: '获取海报中...'});
    const poster = await getPoster('words', id || '')
    Taro.hideLoading();
    if (poster) {
      Taro.navigateTo({url: '/distributor/poster/poster?url=' + poster.url})
    } else {
      Taro.showToast({title: '获取海报失败！', icon: 'none'})
    }
  }

  openShow() {
    const show = this.state.show
    this.setState({
      show: !show
    })
  }

  render() {
    const {wordImg, pid, name, url, type, show} = this.state
    return (
      <View className='words-root'>
        <GzhAuth />
        <View className='share_hrad'>
          <View className='share_header'>
            {type == 'PDF' &&
            <Image mode='widthFix' src='https://resource.ivcheng.com/resources/images/words_pdf.png' />}
            {type == 'WORD' &&
            <Image mode='widthFix' src='https://resource.ivcheng.com/resources/images/words_word.png' />}
            <Text>{name}</Text>
          </View>
          <View className='share_head_img'><Image src={wordImg[0]} mode='widthFix' /></View>
        </View>
        <View className='share-box'>
          <View className='share-title'>分享到</View>
          <View className='share_listall'>
            {process.env.TARO_ENV === 'h5' ?
              <View onClick={this.openShow.bind(this)} className='share-list'>
                <View className='share-icon'>
                  <Image src='https://resource.ivcheng.com/resources/images/shareList_icon1.jpg' />
                </View>
                <Text>微信好友</Text>
              </View>
              :
              <Button openType='share' className='share-list'>
                <View className='share-icon'>
                  <Image src='https://resource.ivcheng.com/resources/images/shareList_icon1.jpg' />
                </View>
                <Text>微信好友</Text>
              </Button>
            }
            <View className='share-list' onClick={this.onCopy.bind(this, url)}>
              <View className='share-icon'>
                <Image src='https://resource.ivcheng.com/resources/images/shareList_icon2.jpg' />
              </View>
              <Text>复制链接</Text>
            </View>
            <View className='share-list' onClick={this.onGetPoster.bind(this, pid)}>
              <View className='share-icon'>
                <Image src='https://resource.ivcheng.com/resources/images/shareList_icon3.jpg' />
              </View>
              <Text>保存到相册并分享</Text>
            </View>
          </View>
        </View>
        {show && <View className='H5shareBox' onClick={() => {
          this.setState({show: false})
        }}
        >
          <Image className='H5shareImg' src='https://resource.ivcheng.com/resources/images/H5sharebj.png'
            mode='widthFix'
          />
          <View className='H5shareBtn'>我知道了</View>
        </View>
        }
      </View>
    )
  }
}
